<template>
  <div>
    <el-autocomplete style="width: 100%"
                     v-model="state"
                     :fetch-suggestions="querySearchAsync"
                     :trigger-on-focus="false"
                     placeholder="请输入基金代码"
                     @select="handleSelect">
      <ul slot-scope="{ item }">
        <div>
          <span style="width: 60%">{{ item.fundName }}</span>
          <span style="color: #26B4FF;width: 25%;margin-left: 10px">{{ item.fundCode }}</span>
          <span style="width: 15%;margin-left: 100px"><el-button type="primary" size="small" @click="add(item)">添加</el-button></span>
        </div>
        <div style="color: #999999">
          <span>基金经理</span>
          <span style="margin-left: 100px">成立时间</span>
        </div>
        <div>
          <span style="font-size: x-large; color: #42b983">{{ item.fundManager }}</span>
          <span style="margin-left: 100px">{{ item.fundSetupDate }}</span>
        </div>

        <li>


        </li>
      </ul>
    </el-autocomplete>

  </div>

</template>


<script>


import axios from "../../plugins/axiosConfig";
import {addFundUrl, queryUrl} from "../../utils/api";
import Cookies from 'js-cookie';

export default {
  data() {
    return {
      funds: [],
      state: '',
      timeout: null
    };
  },
  methods: {
    loadAll(queryString, cb) {

      axios.get(queryUrl + '?condition=' + queryString
      ).then((res) => {
        console.log("--------res", res)
        if (res.status === 200) {
          if (res.data) {
            // alert("登陆成功,token: " + res.data.data);
            console.log("查询成功: " + res.data.data);

          }
          this.funds = res.data.data
          if (cb) {
            cb(res.data.data)
          }
          return res.data.data
        }
      })

      // return [
      //   {"fundCode": "000001", "fundName": "华夏基金", "fundManager": "王宝强等", "fundSetupDate": "2020-04-30"}
      // ];
    },
    querySearchAsync(queryString, cb) {
      if (queryString.length !== 6) {
        return ;
      }
      // var funds = this.funds;
      var funds = this.loadAll(queryString, cb);

      var results = funds;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000);
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.fundCode.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    add(item) {
      console.log('add');
      console.log(item);
      axios.post(addFundUrl + '?fundCode=' + item.fundCode).then((res) => {
        console.log(res)
        this.$router.push('/my')
      });


    }
  },
  mounted() {
    this.funds = this.loadAll('', null);
    console.log(Cookies.get('user'))
  },
  name: 'search'
}
</script>

<style>


</style>